<template>
  <div id='fromregist'>
    <div class='from-input'>
      <div class='from-info'>
        <div
          class='info-title'>
          <h1>MyPan注册</h1>
        </div>
        <div
          class='info-message'>
          <div>
            <span
              class='iconfont'>&#xe720;
            </span>
            <input type="text"
              placeholder="用户名"
              v-model='fromlist.username'>
          </div>
          <div>
            <span
              class='iconfont '>&#xe69e;
            </span>
            <input type="text"
              placeholder="邮箱"
              v-model='fromlist.email'>
          </div>
          <div>
            <span
              class='iconfont '>&#xe62c;
            </span>
            <input
              type="password"
              placeholder="密码"
              v-model='fromlist.password'>
          </div>
          <input type="button"
            value='注册'
            class='from-btn'
            @click='registerbtn'>
        </div>
        <div class='login'>
          <router-link
            to='/login'>
            已有账号？请登录
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Qs from 'qs'
import { Toast } from 'mint-ui'
import Cookie from '../cookies/cookie'
export default {
  name: 'fromlist',
  data() {
    return {
      fromlist: {
        username: '',
        email: '',
        password: '',
      },
    }
  },
  methods: {
    registerbtn() {
      if (!this.hasadmin) {
        Toast({
          message: '请输入完整信息',
          duration: 500,
        })
      } else {
        this.$axios({
          method: 'post',
          url: 'http://192.168.43.118:8080/register',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          data: Qs.stringify(this.fromlist),
        }).then((res) => {
          console.log(res.data.status)
          if (res.data.status == 1) {
            Toast({
              message: '注册成功',
              duration: 500,
            })
            Cookie.setCookie('_login=true', 24, '/')
            this.$router.replace({ path: '/' })
          } else {
            Toast({
              message: '账号已存在',
              duration: 500,
            })
          }
        })
      }
    },
  },
  computed: {
    hasadmin() {
      if (
        this.fromlist.email.length != 0 &&
        this.fromlist.password.length != 0 &&
        this.fromlist.username.length != 0
      ) {
        return true
      } else {
        return false
      }
    },
  },
}
</script>

<style lang='less'>
#fromregist {
  display: inline-block;
  width: 100%;
  height: 27rem;
  text-align: center;
  position: relative;
  .from-input {
    width: 80%;
    height: 100%;
    display: inline-block;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(242, 242, 242, 0.5);
    .from-info {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .info-title {
        flex: 0.6;
        h1 {
          margin-top: 2rem;
          color: rgb(72, 168, 247);
          font-weight: 500;
        }
      }
      .info-message {
        flex: 2;
        padding-top: 3rem;
        box-sizing: border-box;
        div {
          display: inline-block;
          width: 80%;
          height: 2.5rem;
          line-height: 5rem;
          position: relative;
          border: 1px solid #cbcbcb;
          border-radius: 10px;
          margin-bottom: 1rem;
          input {
            outline: none;
            position: absolute;
            height: 1.5rem;
            margin-top: -0.75rem;
            left: 2rem;
            top: 50%;
            border: none;
            font-size: 1rem;
          }
          span {
            display: inline-block;
            top: -50%;
            height: 1.5rem;
            position: absolute;
            left: 0.3rem;
            font-size: 1.4rem;
            font-weight: normal;
          }
        }
        .from-btn {
          width: 80%;
          height: 2.5rem;
          border: none;
          color: #fff;
          background: rgb(72, 168, 247);
          border-radius: 10px;
          outline: none;
          font-size: 1rem;
        }
      }
      .login {
        a {
          display: block;
          color: #000;
          margin-top: 1rem;
          font-size: 1rem;
        }
      }
      div {
        display: inline-block;
        flex: 0.6;
        text-align: center;
        height: 1px;
      }
    }
  }
}
</style>